<template>
  <div>
    <el-container>
      <el-header>
        <el-row :gutter="20">

          <el-col :span="3">
            <el-select v-model="searchData.institutionType" style="width:100px;" size="small" placeholder="单位类型">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-select v-model="searchData.institutionId" clearable style="width:150px;" size="small" placeholder="单位">
              <el-option
                v-for="item in institutionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>

          <el-col :span="4">
            <el-select v-model="searchData.villageId" clearable style="width:150px;" size="small" placeholder="村庄">
              <el-option
                v-for="item in villageList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-col>

          <el-col :span="6">
            <el-date-picker
              v-model="searchDate"
              value-format="yyyy-MM-dd"
              size="small"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="getSearchDate"
            />
          </el-col>

          <el-col :span="2">
            <el-button icon="el-icon-search" size="small" @click="getContradictionStatistics">搜索</el-button>
          </el-col>
        </el-row>
      </el-header>

      <el-main>
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >

          <el-table-column label="单位" align="center">
            <template slot-scope="scope">
              {{ scope.row.institutionName }}
            </template>
          </el-table-column>

          <el-table-column label="问题总量" align="center">
            <template slot-scope="scope">
              {{ scope.row.total }}
            </template>
          </el-table-column>

          <el-table-column label="已解决" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.solvedCount }}</span>
            </template>
          </el-table-column>

          <el-table-column label="未解决" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.toSolveCount }}</span>
            </template>
          </el-table-column>

        </el-table>

      </el-main>

    </el-container>

  </div>
</template>

<script>
import request from '@/utils/request'
import { formatDate } from '@/utils/formatDate.js';

export default {
  filters: {
    dateFilter(date) {
      return formatDate(new Date(date), 'yyyy-MM-dd');
    },
    statusFilter(status) {
      if (status === 0) {
        return '待提交';
      }
      if (status === 1) {
        return '待解决';
      }
      if (status === 2) {
        return '已解决';
      }
    }
  },
  components: {},
  data() {
    return {
      options: [
        {
          value: 1,
          label: '职能部门'
        },
        {
          value: 2,
          label: '管理区'
        }
      ],
      list: [],
      institutionList: [],
      villageList: [],
      listLoading: true,
      searchDate: [],
      searchData: {
        institutionType: 0,
        institutionId: null,
        villageId: null
      },
      selectedContradiction: null
    }
  },
  watch: {
    'searchData.institutionType'(val) {
      // this.institutionId = [];
      // this.searchData.villageId = null;
      // this.searchData.institutionList = null;
      // this.villageList = [];
      this.searchData.institutionId = null;
      this.searchData.villageId = null;
      this.getInstitutionListByType();
    },
    'searchData.institutionId'(val) {
      this.getVillageListByInstitutionId();
    }
  },
  created() {
    // 监听键盘事件
    document.onkeydown = e => {
      var _key = window.event.keyCode;
      if (_key === 13) {
        this.getContradictionStatistics();
      }
    }
    this.searchData.institutionType = 1;
    this.getContradictionStatistics();
  },
  methods: {
    getContradictionStatistics() {
      this.listLoading = true
      request({
        url: '/api/statistics/getContradictionStatistics',
        method: 'get',
        params: this.searchData
      }).then((res) => {
        this.list = res.result;
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 根据类型获取单位列表
    getInstitutionListByType() {
      request({
        url: '/api/institution/getInstitutionListByType',
        method: 'get',
        params: { type: this.searchData.institutionType }
      }).then((res) => {
        this.institutionList = res.result;
      }).catch(() => {})
    },
    // 根据单位id获取村庄列表
    getVillageListByInstitutionId() {
      request({
        url: '/api/village/getVillageListByInstitutionId',
        method: 'get',
        params: { institutionId: this.searchData.institutionId }
      }).then((res) => {
        this.villageList = res.result;
      }).catch(() => {})
    },
    getSearchDate(date) {
      if (date != null) {
        this.searchData.startTime = new Date(date[0]);
        this.searchData.endTime = new Date(date[1]);
      } else {
        this.searchData.startTime = null;
        this.searchData.endTime = null;
      }
    }
  }
}
</script>
<style scoped>
  html,body {
    height:100%;
  }
  .el-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 0;
    left:0;
  }
  .el-header {
    /* line-height: 60px; */
    height: auto !important;
    margin-top: 15px;
    flex-grow: 0;
    flex-shrink: 0;
  }
  .el-footer {
    flex-grow: 0;
    flex-shrink: 0;
  }
  .el-main {
    flex-grow: 1;
    flex-shrink: 1;
    overflow-y: auto;
  }
  .el-date-editor--daterange.el-input__inner {
    width: auto;
  }
</style>
